<template>
<div class="main">
    <!-- 返回按钮 -->
    <div class="div1">
        <el-button type="info" @click="fanHui()">返回</el-button>
    </div>
    <!-- 修改的表单 -->
    <div class="div2">
        <el-form ref="form" :model="form" label-width="80px" :label-position="labelPosition" class="clear">
            <el-form-item label="类型">
                <el-select v-model="form.types" placeholder="请选择">
                    <el-option v-for="item in typeSea" :key="item.id" :label="item.title" :value="item.title"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="状态">
                <el-select v-model="form.status" placeholder="请选择">
                    <el-option v-for="item in status" :key="item.id" :label="item.title" :value="item.title"></el-option>
                <!-- <el-option label="有效" value="0"></el-option>
                <el-option label="无效" value="1"></el-option> -->
                </el-select>
            </el-form-item>
            <el-form-item label="患者名称">
                <el-input v-model="form.username"></el-input>
            </el-form-item>
            <el-form-item label="患者性别">
                <el-select v-model="form.sex" placeholder="请选择">
                <el-option label="男" value="1"></el-option>
                <el-option label="女" value="2"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="患者年龄">
                <el-input v-model="form.age"></el-input>
            </el-form-item>
            <el-form-item label="出生年月">
                <el-input v-model="form.birthDate"></el-input>
            </el-form-item>
            <el-form-item label="出生地">
                <el-input v-model="form.birthLocal"></el-input>
            </el-form-item>
            <el-form-item label="患者民族">
                <el-input v-model="form.nation"></el-input>
            </el-form-item>
            <el-form-item label="患者职业">
                <el-input v-model="form.profession"></el-input>
            </el-form-item>
            <el-form-item label="婚姻状况">
                <el-input v-model="form.marriage"></el-input>
            </el-form-item>
            <el-form-item label="身份证号">
                <el-input v-model="form.customerCard"></el-input>
            </el-form-item>
            <el-form-item label="医保卡号">
                <el-input v-model="form.medicalInsurance"></el-input>
            </el-form-item>
            <el-form-item label="手机号码">
                <el-input v-model="form.customerPhoneNumber"></el-input>
            </el-form-item>
            <el-form-item label="患者备注">
                <el-input v-model="form.customerRemark"></el-input>
            </el-form-item>
            <hr>
            <el-form-item label="联系人">
                <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="手机号码">
                <el-input v-model="form.userPhoneNumber"></el-input>
            </el-form-item>
            <el-form-item label="Email">
                <el-input v-model="form.email"></el-input>
            </el-form-item>
            <el-form-item label="微信">
                <el-input v-model="form.wechat"></el-input>
            </el-form-item>
            <hr>
            <el-form-item label="国家">
                <el-input v-model="form.country"></el-input>
            </el-form-item>
            <el-form-item label="省">
                <el-input v-model="form.province"></el-input>
            </el-form-item>
            <el-form-item label="市">
                <el-input v-model="form.city"></el-input>
            </el-form-item>
            <el-form-item label="区">
                <el-input v-model="form.area"></el-input>
            </el-form-item>
            <el-form-item label="地址">
                <el-input v-model="form.address"></el-input>
            </el-form-item>
            <el-form-item label="邮编">
                <el-input v-model="form.postal"></el-input>
            </el-form-item>
            <hr>
            <el-form-item class="fuWenBen" v-model="form.remark">
                <template>
                    <div style="border: 1px solid #ccc;">
                        <Toolbar
                            style="border-bottom: 1px solid #ccc"
                            :editor="editor"
                            :defaultConfig="toolbarConfig"
                            :mode="mode"
                        />
                        <Editor
                            style="height: 500px; overflow-y: hidden;"
                            v-model="html"
                            :defaultConfig="editorConfig"
                            :mode="mode"
                            @onCreated="onCreated"
                        />
                    </div>
                </template>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="patientsModify()">确定</el-button>
                <el-button @click="cancel()">取消</el-button>
            </el-form-item>
        </el-form>
    </div>
</div>
</template>
<script>
import '@wangeditor/editor/dist/css/style.css'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'

import {initPatientsTableAdd,PatientsTableModify} from '../utils/api/patients'
export default {
// eslint-disable-next-line vue/multi-word-component-names
name:"",
components: { Editor, Toolbar },
data(){
    return {
        typeSea:[],
        status:[],
        labelPosition:'left',
        form:{
            id:null,
            types:null,
            status:null,
            username:null,
            sex:null,
            age:null,
            birthDate:null,
            birthLocal:null,
            nation:null,
            profession:null,
            marriage:null,
            customerCard:null,
            medicalInsurance:null,
            customerPhoneNumber:null,
            customerRemark:null,
            name:null,
            userPhoneNumber:null,
            email:null,
            wechat:null,
            country:null,
            province:null,
            city:null,
            area:null,
            address:null,
            postal:null,
            remark:null,
        },
        editor: null,
        html: '<p>hello</p>',
        toolbarConfig: { },
        editorConfig: { placeholder: '请输入内容...' },
        mode: 'default', // or 'simple'
        modify:{}
    }
},
methods:{
    // 点击修改页面中的返回按钮，返回到患者管理的主页面
    fanHui(){
        this.$router.push('/home/patientsManagement/patientsManagementHome')
    },
    // 回显
    patientsModifyHuiXian(){
        this.modify=this.$route.query;
        // console.log(this.modify);
        this.form.id=this.modify.id,
        this.form.types=this.modify.typesCustomer.title,
        this.form.status=this.modify.statusCustomer.title,
        this.form.username=this.modify.username,
        this.form.sex=this.modify.sex,
        this.form.age=this.modify.age,
        this.form.birthDate=this.modify.birthDate,
        this.form.birthLocal=this.modify.birthLocal,
        this.form.nation=this.modify.nation,
        this.form.profession=this.modify.profession,
        this.form.marriage=this.modify.marriage,
        this.form.customerCard=this.modify.customerCard,
        this.form.medicalInsurance=this.modify.medicalInsurance,
        this.form.customerPhoneNumber=this.modify.phoneNumber
        this.form.customerRemark=this.modify.customerRemark,
        this.form.name=this.modify.customerUser.name,
        this.form.userPhoneNumber=this.modify.customerUser.phoneNumber,
        this.form.email=this.modify.customerUser.email,
        this.form.wechat=this.modify.customerUser.wechat,
        this.form.country=this.modify.customerLocation.country,
        this.form.province=this.modify.customerLocation.province,
        this.form.city=this.modify.customerLocation.city,
        this.form.area=this.modify.customerLocation.area,
        this.form.address=this.modify.customerLocation.address,
        this.form.postal=this.modify.customerLocation.postal,
        this.form.remark=this.modify.remark
    },
    //点击修改页面中的确认按钮，提交数据到后台数据库，并返回到患者管理的主页面
    patientsModify(){
        let obj2={
            id:this.form.id,
            types:this.form.types,
            status:this.form.status,
            username:this.form.username,
            sex:this.form.sex,
            age:this.form.age,
            birthDate:this.form.birthDate,
            birthLocal:this.form.birthLocal,
            nation:this.form.nation,
            profession:this.form.profession,
            marriage:this.form.marriage,
            customerCard:this.form.customerCard,
            medicalInsurance:this.form.medicalInsurance,
            customerPhoneNumber:this.form.customerPhoneNumber,
            customerRemark:this.form.customerRemark,
            name:this.form.name,
            userPhoneNumber:this.form.userPhoneNumber,
            email:this.form.email,
            wechat:this.form.wechat,
            country:this.form.country,
            province:this.form.province,
            city:this.form.city,
            area:this.form.area,
            address:this.form.address,
            postal:this.form.postal,
            remark:this.form.remark
        };
        // console.log(obj2);
        PatientsTableModify(obj2).then((data)=>{
            console.log(data);
            if(data.data.code==200){
                  this.$router.push('/home/patientsManagement/patientsManagementHome')
            }
        })
    },   
    //点击修改页面中的取消按钮，返回到患者管理的主页面
    cancel(){
        this.$router.push('/home/patientsManagement/patientsManagementHome')
    },
    // 富文本编辑器
    onCreated(editor) {
            this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
    },
},
created(){
    this.patientsModifyHuiXian(),
    initPatientsTableAdd().then((data)=>{
                console.log(data);
                this.typeSea=data.data.data.type;
                this.status=data.data.data.status;
                console.log(this.typeSea,this.status);
            })
}
}
</script>
<style lang="less" scoped>
.main{
    width: 100%;
    background-color: white;
    margin-top: 20px;
    
}
.div2{
    width: 100%;
    margin-top: 20px;
    // border: 1px solid blue;
}
.el-form-item{
    width:50%;
    float: left;
    padding-right: 30px;
    box-sizing: border-box;
}
.fuWenBen{
    width:100% ;
    // border: 1px solid red;
}
.el-select{
    width: 100%;
}
hr{
    margin-bottom: 20px;
}
</style>